<template>
  <div id="box" :class="modalClass">
    <div id="content">
      <button class="closeWindow" @click="cancel">
        <svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg>
      </button>
      <p class="title">修改交易密码</p>
      <p class="cl" style="padding-top: 30px">旧密码</p>
      <p class="ct">
        <input type="password" placeholder="请输入旧交易密码" v-model="oldpws">
      </p>
      <p class="cl">新密码</p>
      <p class="ct">
        <input type="password" placeholder="请输入6位数字密码" v-model="pws">
      </p>
      <p class="cl">确认新密码</p>
      <p class="ct">
        <input type="password" placeholder="请再次输入新密码" v-model="pws2">
      </p>
      <p class="cl">短信验证码</p>
      <p class="ct code">
        <input type="text" placeholder="请输入短信验证码" v-model="code">
        <button class="getCode">
          <tongdun-Countdown verfityMobile='false' ref="tdEle" beginMsg="获取验证码" refreshMsg="重新获取" timeout="1000" endtime="60"
                             @run="sendCode" @getTdToken="getTdToken" wt='' hg='50px'>
          </tongdun-Countdown>
        </button>
      </p>
      <p class="sub">
        <button @click="callback">确认</button>
      </p>
    </div>
  </div>
</template>
<script>
  import { getMbCode2  , editTransactionPws} from "../http/api";
  export default {
    name : 'setTransPws',
    data (){
      return {
        modalClass : 'modal-hide',
        oldpws : null,
        pws : null,
        pws2 : null,
        code : null,
        yzm_token : null,
        blackBox : null,
      }
    },
    components:{
      tongdunCountdown: resolve => { require(['../components/tongdunCountdown'], resolve) },//同盾倒计时功能插件
    },
    methods:{
      callback(){
        let info = null;
        if(!this.oldpws){
          info = '请输入旧密码';
        } else if(!this.pws){
          info = '请输入交易密码';
        }else if(!this.pws2){
          info = '请输入确认交易密码';
        }else if( this.pws2 != this.pws){
          info = '两次密码输入不一致';
        }else if(!this.code){
          info = '请输入短信验证码';
        }
        if(info){
          require('../common/js/toast').toast(info);
          return;
        }
        let params = {transactionPassword : this.oldpws , smscaptcha : this.code , newTransactionPassword:this.pws};
        editTransactionPws(params).then( res =>{
          if( res.code == 200 ){
            require('../common/js/toast').toast('修改交易密码成功');
            this.$emit('confirm'); /*组件调用方法： @confirm='function'*/
            this.hide();
          }else if( res.code == 609 ){
            //去实名
            require('../common/js/toast').toast('请实名后再设置交易密码');
          }else{
            require('../common/js/toast').toast(res.message);
          }
        });
      },
      cancel(){
        this.hide();
        this.$emit('cancel'); /*组件调用方法： @cancel='function'*/
      },
      show(){
        this.modalClass = 'modal-show';
      },
      hide(){
        this.modalClass = 'modal-hide';
      },
      dialogShow() {
        /*显示弹窗*/
        this.oldpws = null;
        this.pws = null;
        this.pws2 = null;
        this.code = null;
        this.yzm_token = null;
        this.blackBox = null;
        this.$refs.tdEle.resetTd();
        this.show();
      },
      sendCode() {
        //发送验证码
        let thiz = this ;
        if(thiz.$refs.tdEle.interval != null){
          require('../common/js/toast').toast('请勿重复点击^_^');
        }else{
          let param = {
            blackBox: thiz.blackBox ,
            yzm_token: thiz.yzm_token
          };
          getMbCode2(param).then(function (res) {
            if( res.code == 200){
              thiz.$refs.tdEle.begin();
              require('../common/js/toast').toast('验证码已发送至您的手机');
            }else{
              thiz.$refs.tdEle.resetTd();
            }
          })
        }
      },
      getTdToken(){
        //获取同盾token
        let thiz = this;
        thiz.$refs.tdEle.getTdToken(function (res) {
          thiz.yzm_token = res.yzm_token;
          thiz.blackBox = res.blackBox;
          thiz.sendCode();
        })
      },
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/animate.css";
  #box{
    position: fixed;z-index: 10;background: rgba(0,0,0,0.5);width: 100%;height: 100%;left: 0;top: 0;
  }
  #content {
    left: 50%;top: 50%;min-height: 228px;overflow:hidden;background: #fff;.borderRadius;position: absolute;
    width: 430px;height: 505px;margin-left: -215px;margin-top: -253px;text-align: center;padding: 0 30px;
    .closeWindow{
      padding: 11px;position: absolute;right: 0;top:0;background: none;
      img{width: 13px;height: 13px};color: rgba(0, 0, 0, 0.45);font-size: 18px;
      &:hover{
        color: rgba(0, 0, 0, 0.75);
      }
    }
    >.title{
      font-size: 20px;padding-top: 23px;color: #262626;
    }
    >.cl{
      font-size: 14px;color: #999;padding-top: 25px;text-align: left;
    }
    >.ct{
      padding-top: 13px;
      >input{
        .input();height: 38px;width: 100%;padding: 0 9px;
      }
    }
    >.sub{
      padding-top: 30px;
      >button{
        .submit;width: 160px;height: 38px;font-size: 16px;line-height: 38px;
      }
    }
    >.code{
      position: relative;padding-top: 0;margin-top: 13px;
      >.getCode{
        display: inline-block;height: 100%;width: 88px;text-align: center;position: absolute;right: 0;top:0;z-index: 1;
        background: none;.colorYellow;
        /deep/ span{
          line-height: 38px;
        }
      }
      >input{
        padding-right: 95px;
      }
    }
  }
</style>
